<template>
<div>
	<div class="news_item">
		<a class="user">
			<img src="../../public/img/1.png" alt="">
			<div class="user_name">
				<span class="name">张三</span>
				<span class="pushtime">36分钟前</span>
			</div>
		</a>
		<h3><span class="item_title">国米哈哈哈哈啊哈哈</span></h3>
		<div class="news_body">
			<div class="text">
				此前湖人火箭比赛中，保罗拼抢篮板的过程中差点拽伤老詹的胳膊，那一动作也是引起了不少球迷的气愤。然而这丝毫不会影响詹姆斯保罗间的兄弟情，昨天保罗在对阵勇士的比赛中完成了常规赛助攻数超过9000，升至历史第8的壮举。
				詹姆斯晒图并写道：“天啊！祝贺我的兄...
			</div>
			<div class="thumbnail">
				<ul>
					<li>
						<img src="../../public/img/1-3.jpg" alt="">
					</li>
					<li>
						<img src="../../public/img/1-1.jpg" alt="">
					</li>
					<li>
						<img src="../../public/img/1-2.jpg" alt="">
					</li>.
					<li>
						<img src="../../public/img/1-1.jpg" alt="">
					</li>
					<li>
						<img src="../../public/img/1-2.jpg" alt="">
					</li>
				</ul>
			</div>
		</div>
		<div class="news_item_bottom">
			<a href=""  class="labels">NBA赛场</a>
			<div class="rightlist">
				<span>100000</span><span class="zan"><img src="../../public/img/zan.png" alt=""></span>
				<span>100</span><span class="zan"><img src="../../public/img/pl.png" alt=""></span>
			</div>	
		</div>
	</div>
	<div class="news_item">
		<a class="user">
			<img src="../../public/img/1.png" alt="">
			<div class="user_name">
				<span class="name">张三</span>
				<span class="pushtime">36分钟前</span>
			</div>
		</a>
		<h3><span class="item_title">国米哈哈哈哈啊哈哈</span></h3>
		<div class="news_body">
			<div class="text">
				此前湖人火箭比赛中，保罗拼抢篮板的过程中差点拽伤老詹的胳膊，那一动作也是引起了不少球迷的气愤。然而这丝毫不会影响詹姆斯保罗间的兄弟情，昨天保罗在对阵勇士的比赛中完成了常规赛助攻数超过9000，升至历史第8的壮举。
				詹姆斯晒图并写道：“天啊！祝贺我的兄...
			</div>
			<div class="thumbnail">
				<ul>
					<li>
						<img src="../../public/img/1-3.jpg" alt="">
					</li>
					<li>
						<img src="../../public/img/1-1.jpg" alt="">
					</li>
					<li>
						<img src="../../public/img/1-2.jpg" alt="">
					</li>.
					<li>
						<img src="../../public/img/1-1.jpg" alt="">
					</li>
					<li>
						<img src="../../public/img/1-2.jpg" alt="">
					</li>
				</ul>
			</div>
		</div>
		<div class="news_item_bottom">
			<a href=""  class="labels">NBA赛场</a>
			<div class="rightlist">
				<span>100000</span><span class="zan"><img src="../../public/img/zan.png" alt=""></span>
				<span>100</span><span class="zan"><img src="../../public/img/pl.png" alt=""></span>
			</div>	
		</div>
	</div>
</div>
</template>

<script>
</script>

<style lang="scss" scoped>
	.news_item{
		background: #fff;
		padding:15px 0px;
		line-height: 25px;
		border-bottom: 1px solid #f5f5f5;
		.user{
			position: relative;
			margin-left: 12px;
			display: flex;
			justify-content: flex-start;
			img{
				border-radius: 50%;
				width: 36px;;
				height: 36px;
				margin: 0px -10.98px;
				margin-right: 12px;
			}
			.user_name{
				position: absolute;
				top: 4px;
				left: 36px;
				line-height: 15px;
				.name{
					display: block;
					font-size: 14px;
					font-weight: bold;
				}
				.pushtime{
					padding: 0;
					margin: 0;
					margin-top: 2px;
					font-size: 12px;
					color: #999;
				}
			}
			h3{
				padding: 0;
				margin: 0;
				line-height: 0px;
			}
		}
		.item_title{
			color: #333;
			font-weight: normal;
			font-size: 16px;
		}
		.item_title:hover{
			color: #ff8600;
			cursor: pointer;
		}
		.news_body{
			.text{ //文本最多显示两行
				font-size: 14px;
				color: #999;
				overflow:hidden; 
				text-overflow:ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2; 
				margin-bottom:15px; 
			}
			.thumbnail{
				ul,li{
					padding: 0;
					margin: 0;
					list-style: none;
				}
				ul>li{
					width: 228px;
					height: 152px;
					display: inline-block;
					overflow: hidden;
					img{
						border-radius: 5px;
						width: 100%;
						height: 152px;
						cursor: pointer;
						transition: all 0.6s;
					}
					img:hover{
						transform: scale(1.3);
					}
				}
			}
		}
		.news_item_bottom{
			overflow: hidden;
			.labels{
				float: left;
				display: block;
				margin-top:10px; 
				font-size: 12px;
				color: #999;
				text-decoration: none;
			}
			.rightlist{
				float:right;
				margin-top:10px; 
				font-size: 12px;
				color: #999;
				span{
					padding: 5px;
					line-height: 10px;
					vertical-align: middle;
					text-align: center;
				}
				.zan{
					display: inline-block;
					width: 15px;
					margin-right: 15px;
				}
				img{
					width: 100%;
					height: auto;
					cursor: pointer;
				};
			}
		}
		
		
	}
</style>
